<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>立即购买</title>
    <link rel="stylesheet" th:href="@{/static/before/css/style.css}"/>
    <script th:src="@{/webjars/jquery/2.1.3/jquery.js}" type="text/javascript"></script>
    <style>
        #and {
            font-size: 20px;
            font-weight: bold;
            background-color: #ff830a;
            color: white;
            border-radius: 40%;
        }

        #go {
            font-size: 19px;
            font-weight: bold;
            background-color: #ff830a;
            color: white;
            border-radius: 40%;
        }

        .color {
            font-family: "微软雅黑";
            height: 40px;
            line-height: 40px;
            width: 272px;
            cursor: pointer;
            border: 1px solid #bbb;
        }

        .colors {
            font-family: "微软雅黑";
            height: 40px;
            line-height: 40px;
            width: 272px;
            cursor: pointer;
            border: 1px solid #ff470b;
        }

        .type {
            font-family: "微软雅黑";
            height: 40px;
            line-height: 40px;
            width: 272px;
            cursor: pointer;
            border: 1px solid #bbb;
        }

        .types {
            font-family: "微软雅黑";
            height: 40px;
            line-height: 40px;
            width: 272px;
            cursor: pointer;
            border: 1px solid #ff470b;
        }

    </style>
</head>

<body>
<!--header-->
<div th:insert="before/header :: header"></div>
<div th:insert="before/header02 :: header02"></div>
<div>
    <!-- xiangqing -->
    <form action="post" method="">
        <div class="xiangqing">
            <div class="neirong w">
                <nav class="fr">
                    <li>
                        <a th:href="@{/before/summarize/} + ${goods.gid}">概述</a>
                    </li>
                    <li>|</li>
                    <li>
                        <a th:href="@{/before/goodsparam/} + ${goods.gid}">参数</a>
                    </li>
                    <li>|</li>
                    <li>
                        <a th:href="@{/before/showcomments/}+ ${goods.gid}">查看评论</a>
                    </li>
                    <div class="clear"></div>
                </nav>
                <div class="clear"></div>
            </div>
        </div>

        <div class="jieshao mt20 w">
            <!--轮播-->
            <div class="left fl" style="width: 550px">
                <div class="box">
                    <div class="box-1" th:each="showimages,varStatus:${showimages}">
                        <ul>
                            <li>
                                <img th:src="@{http://192.168.1.58:8001/}+${showimages.showimage}" />
                            </li>
                        </ul>
                    </div>
                    <div class="box-2">
                        <ul>
                        </ul>
                    </div>
                    <div class="box-3">
                        <span class="prev"> < </span>
                        <span class="next"> > </span>
                    </div>
                </div>
            </div>


            <div class="right fr" style="width: 670px;">
                <div class="h3 ml20 mt20" th:text="${goods.gname}">小米6</div>
                <div class="jianjie mr40 ml20 mt10" th:text="${goods.introduct}+','+${goods.service}">
                </div>
                <div class="jiage ml20 mt10" th:text="${goods.price}">2499.00元</div>

                <table border="0" style="height: 420px">
                    <div th:each="goodsinfos:${goodsinfo}">
                        <tr>
                            <td>
                                <div class="ft20 ml20 mt10" th:text="选择版本"></div>
                            </td>
                            <td>
                                <div class="ft20 ml20 mt10" th:text="选择颜色"></div>
                            </td>
                        </tr>
                        <tr>
                            <td valign="top">
                                <div class="xzbb ml20" th:each="goodstype:${goodsinfos.goodstype}">
                                    <div class="banben type types" style="width: 350px;
                                    height: 40px;
                                    height: 40px;
                                    line-height: 40px;"
                                         th:attr="typeid=${goodstype.gtypeid},difprice=${goodstype.difprice}">
                                        <a style="padding: 0px;">
                                            <span style="display: block;font-size: 13px;text-align: center"
                                                  th:text="${goodstype.gtypename}==null ? '无版本选择': ${goodstype.gtypename}">空</span>
                                            <input type="hidden" id="difprice"
                                                   th:attr="difprice=${goodstype.difprice}"/>
                                        </a>
                                    </div>
                                </div>
                            </td>
                            <td valign="top">
                                <div class="xzbb ml10" th:each="goodcolor:${goodsinfos.goodscolor}">
                                    <div class="banben color colors" style="width: 270px;
                                    height: 40px;
                                    height: 40px;
                                    line-height: 40px;"
                                         th:attr="colorid=${goodcolor.gcolorid}">
                                        <a>
                                            <span style="display: block;text-align: center;font-size: 12px"
                                                  th:text="${goodcolor.gcolorname}">亮黑色</span>
                                            <input type="hidden" id="colorid"/>
                                        </a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </div>
                    <tr>
                        <td>
                            <div class="bot mt10 ft20 ftbc" th:attr="p=${goods.price}" id="price">&nbsp;&nbsp;&nbsp;总计：￥
                                <input type="text" readonly id="total"
                                       style="border: 0px;
                                       font-size:22px;
                                       font-weight:bold;
                                       color: orangered;
                                       width: 80px; "/></div>

                        </td>
                        <td>
                            <div>单位: &nbsp;<input type="text" value="" id="count" style="width: 45px;font-weight: bold"/> 个/件/箱&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <a id="and" href="javascript:;">&nbsp;+&nbsp;</a> <a id="go" href="javascript:;">&nbsp;--&nbsp;</a>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="xiadan ml20 mt20">
                            <div class="jrgwc  ml40" name="ljxg"
                                 style="position: relative;left: 20px;text-align: center;line-height: 42px;height: 42px">
                                <a href="javascript:;" style="font-size: 20px;color: white" id="ljxg">立即选购</a>
                            </div>
                            <input type="hidden" id="gid" th:attr="gid=${goods.gid}"/>
                        </td>
                        <td class="xiadan ml20 mt20">
                            <div href="javascript:;" class="jrgwc ml20" name="jrgwc" id="gwc"
                                 style="position: relative;right: 20px;text-align: center;line-height: 42px;height: 42px">
                                加入购物车
                            </div>
                        </td>
                    </tr>
                </table>
                <script>

                    $(document).ready(function () {
                        //选中参数样式(颜色，版本)
                        var $color = $(".color");
                        var $type = $(".type");
                        var $difprice = 0;
                        //指针
                        var count = 0;
                        var $count = $("#count");
                        var $p = $("#price").attr("p");
                        var $total = $("#total");

//--------------------------------------------------------------------------------------------------------------
                        //gid
                        var $gid = $("#gid").attr("gid");
                        //typeid
                        var $typeid;
                        //colorid
                        var $colorid;
                        //单价
                        var price = parseFloat($p);
                        //总价
                        var totalprice = 0;
                        //个数
                        var $c = 0;
                        //差价
                        var difprice = 0;
//---------------------------------------------------------------------------------------------------------------------
                        $type.click(function () {
                            $type.each(function () {
                                $(this).removeClass("types");
                            });
                            $(this).attr('class', 'type types ');
                            $typeid = $(this).attr("typeid");//类型id赋值给typeid
                            $difprice = $(this).attr("difprice");//差价赋值给difprice
                            difprice = parseFloat($difprice);//将差价进行转换
                            $count.val(1);
                            $c = $count.val();
                            $total.val((price + difprice) * $c);
                            totalprice = $total.val();
                            /* alert('个数：'+$c+'，类型id：'+$typeid + ',差价：' + difprice+'，总价：'+totalprice+'，单价：'+price);*/
                        });
                        $("#and").click(function () {
                            if ($colorid == null && $typeid == null) {
                                alert("请选择商品属性！");
                            } else if ($colorid == null && $typeid != null) {
                                alert("请选择颜色！");
                            } else if ($typeid == null && $colorid != null) {
                                alert("请选择类型！");
                            } else {
                                count++;
                                $count.val(count);//个数值
                                $c = $count.val();//个数赋值给c
                                difprice = parseFloat($difprice);
                                $total.val((price + difprice) * $c);//总价值等于单价加差价乘以个数
                                totalprice = $total.val();//总价赋值给totaoprice
                                /*  alert('个数：'+$c+'，总价：'+totalprice+'，差价：'+difprice+'，单价'+price);*/

                            }
                        });
                        $("#go").click(function () {
                            if (count <= 1) {
                                alert("不能再次减啦。");
                            } else {
                                count--;
                                $count.val(count);//个数值
                                $c = $count.val();//个数赋值给c
                                difprice = parseFloat($difprice);
                                $total.val((price + difprice) * $c);//总价值等于单价加差价乘以个数
                                totalprice = $total.val();//总价赋值给totaoprice
                                /*  alert('个数：'+$c+'，总价：'+totalprice);*/
                            }
                        });
                        $color.click(function () {
                            $color.each(function () {
                                $(this).removeClass("colors");
                            });
                            $(this).attr('class', 'color colors ');
                            $colorid = $(this).attr('colorid');//颜色id赋值给colorid
                            /*  alert('颜色id：'+$colorid);*/

                        });


                        //立即选购
                        $("#ljxg").click(function () {
                            if ($typeid == null || $colorid == null) {
                                alert("请选择商品属性！");
                            } else {
                                location.href = "/before/ljxg/" + $gid + "/" + $typeid + "/" + $colorid + "/" + $c + "/" + totalprice;
                            };
                            /*alert($c + ',tid:' + $typeid + ',差价:' + $difprice + ',cid:' + $colorid + ',gid:' + $gid + ',总价:'+totalprice);*/
                            /* $.ajax({
                                 "url": "before/ljxg/" + $gid + "/" + $typeid + "/" + $colorid + "/" + $c + "/"+totalprice,
                                 "dataType": "json",
                                 "type": "post",
                                 "success": function (data) {
                                    alert("chengg ")
                                 }
                             });*/
                            /*  $.get("before/ljxg/" + $gid + "/" + $typeid + "/" + $colorid + "/" + $c + "/"+totalprice, function (data) {
                                  data = eval('(' + data + ')');
                                  alert("gi");
                              })*/
                        });


                        $("#gwc").click(function () {
                            /* var $gid = $("#gid").val();
                             var $gtypeid = $("#goodstypeid").val();
                             var $gcolorid = $("#goodscolorid").val();
                             var $count = $("#count").val();*/
                            $.ajax({
                                "url": "/shoppingcar/" + $gid + "/" + $typeid + "/" + $colorid + "/" + $c + "",
                                "dataType": "json",
                                "type": "get",
                                "success": function (data) {
                                    if (data.result == "true") {
                                        alert("添加购物车成功！");
                                    } else if(data.result=="load"){
                                        window.location.href="/login";
                                    }else{
                                        alert("添加购物车失败！")
                                    }
                                }
                            })
                        });
                    })
                </script>
            </div>
        </div>
    </form>
</div>

<div style="position: relative;top: 50px;height: 30px"></div>
<div th:insert="before/footer :: footer"></div>
</body>
</html>

<script type="text/javascript">
    window.onload = function () {

        function $(param) {
            if (arguments[1] == true) {
                return document.querySelectorAll(param);
            } else {
                return document.querySelector(param);
            }
        }

        var $box = $(".box");
        var $box1 = $(".box-1 ul li", true);
        var $box2 = $(".box-2 ul");
        var $box3 = $(".box-3");
        var $length = $box1.length;

        var str = "";
        for (var i = 0; i < $length; i++) {
            if (i == 0) {
                str += "<li class='on'>" + (i + 1) + "</li>";
            } else {
                str += "<li>" + (i + 1) + "</li>";
            }
        }
        $box2.innerHTML = str;

        var current = 0;

        var timer;
        timer = setInterval(go, 1000);

        function go() {
            for (var j = 0; j < $length; j++) {
                $box1[j].style.display = "none";
                $box2.children[j].className = "";
            }
            if ($length == current) {
                current = 0;
            }
            $box1[current].style.display = "block";
            $box2.children[current].className = "on";
            current++;
        }

        for (var k = 0; k < $length; k++) {
            $box1[k].onmouseover = function () {
                clearInterval(timer);
            }
        }
        for (var p = 0; p < $box3.children.length; p++) {
            $box3.children[p].onmouseover = function () {
                clearInterval(timer);
            };
        }

        for (var u = 0; u < $length; u++) {
            $box2.children[u].index = u;
            $box2.children[u].onmouseover = function () {
                clearInterval(timer);
                for (var j = 0; j < $length; j++) {
                    $box1[j].style.display = "none";
                    $box2.children[j].className = "";
                }
                this.className = "on";
                $box1[this.index].style.display = "block";
                current = this.index + 1;
            }

        }

        $box3.children[0].onclick = function () {
            back();
        }
        $box3.children[1].onclick = function () {
            go();
        }

        function back() {
            for (var j = 0; j < $length; j++) {
                $box1[j].style.display = "none";
                $box2.children[j].className = "";
            }
            if (current == 0) {
                current = $length;
            }
            $box1[current - 1].style.display = "block";
            $box2.children[current - 1].className = "on";
            current--;
        }
    }
</script>